<template>
  <div class="admin-message">
    <div class="top-bar">
      <a-checkbox v-model="allSel" class="checkbox" @change="allSelChange">&nbsp;</a-checkbox>
      <a-button type="danger" size="small" @click="batchDeleteBtnClick">删除</a-button>
    </div>
    <w-table-view :list-data="listData">
      <template v-slot="scope">
        <w-cell :hover="false" :operation-width="70" class="w-cell">
          <a-checkbox v-model="scope.item.sel" class="checkbox" @change="itemSelChange">&nbsp;</a-checkbox>
          <span :style="$bgImage(scope.item.icon)" class="icon w-image-fit w-round" />
          <p class="cell-header">
            <span class="date">{{ scope.item.date | DateFormat }}</span>
            &nbsp;&nbsp;&nbsp;
            <span class="name">{{ scope.item.socketId }}</span>
            &nbsp;&nbsp;&nbsp;
            <span class="name">{{ scope.item.userId }}</span>
            &nbsp;&nbsp;&nbsp;
            <span class="name">{{ scope.item.visitorName }}</span>
          </p>
          <p class="message">{{ scope.item.message }}</p>
          <template slot="option">
            <a-button type="danger" size="small" @click="removeBtnClick(scope.item)">删除</a-button>
          </template>
        </w-cell>
      </template>
    </w-table-view>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { Admin } from "@/config/api";
import WCell from "@/components/global/cell";
import WTableView from "@/components/global/tableview/customCell";

@Component({
  name: "AdminMessageList",
  layout: "admin",
  components: {
    WCell,
    WTableView,
  },
  async asyncData({ app, route }) {
    const { $wAxios } = app;
    const listData = await $wAxios.$get(Admin.message.list, route.query);
    return { listData };
  },
  head() {
    return {
      title: "聊天列表",
    };
  },
})
export default class AdminMessageList extends Vue {
  allSel = false;
  listData!: any;

  @Watch("$route.query")
  routerChange() {
    this.reload();
  }

  created() {
    this.disposeSel();
  }

  /**
   * 批量删除按钮点击
   */
  batchDeleteBtnClick() {
    const selArr = this.listData.list
      .filter((item: any) => {
        return item.sel;
      })
      .map((item: any) => {
        return item._id;
      });
    if (selArr.length === 0) {
      this.$message.error("至少选择一个");
      return null;
    }
    this.$confirm({
      title: "删除提示",
      content: "确定要删除嘛？",
      onOk: () => {
        this.$wAxios
          .$post(Admin.message.batchDelete, {
            list: selArr,
          })
          .then(() => {
            this.$message.success("删除成功");
            this.allSel = false
            this.reload()
          });
      },
    });
  }

  /**
   * 所有选择改变
   */
  allSelChange() {
    this.disposeSel(this.allSel);
  }

  /**
   * 单个选择改变
   */
  itemSelChange() {
    const selArr = this.listData.list.filter((item: any) => {
      return item.sel;
    });
    this.allSel = selArr.length === this.listData.list.length;
  }

  /**
   * 删除按钮点击
   * @param item
   */
  removeBtnClick(item: any) {
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.message.delete}${item._id}`);
    }, item.message).then(() => {
      this.reload();
    });
  }

  reload() {
    this.$wAxios
      .$get(Admin.message.list, this.$route.query)
      .then((data) => {
        this.disposeSel();
        this.listData = data;
      })
      .catch(() => {});
  }

  disposeSel(state = false) {
    this.listData.list.forEach((item: any) => {
      item.sel = state;
    });
    this.listData.list = [...this.listData.list];
  }
}
</script>

<style scoped lang="less">
.admin-message {
  .top-bar {
    padding: 0 0 15px 15px;
  }
  .w-cell {
    padding-left: 90px;
    position: relative;
    .checkbox {
      position: absolute;
      left: 15px;
      top: 50%;
      margin-top: -10px;
    }
    .icon {
      position: absolute;
      left: 40px;
      top: 10px;
      width: 40px;
      height: 40px;
      border: 2px solid #eee;
    }
  }
}
</style>
